<!--
* @Author: h7ml
* @Date: 2021-11-25 14:31:08
* @LastEditors: h7ml
* @LastEditTime: 2021-11-25 14:31:08
* @Description: 组态取证
* @FilePath: src\views\CloudFunction\topo\evidence\index.vue
* @DocumentLink:
-->
<template>
  <el-container class="evidence">
    <el-header class="evidence_header">
      <el-row class="evidence_header_row" :gutter="24">
        <el-col :span="1">
          <el-button type="success" @click.native="asideShow = !asideShow">
            <dgiot-icon color="red" icon="file-list-line" />
          </el-button>
        </el-col>
        <el-col :span="21">{{ task.name }}</el-col>
        <el-col :span="1">
          <el-button type="success">{{ role[0].org_type }}</el-button>
        </el-col>
        <el-col :span="1">
          <el-button type="success" @click.native="taskFlag = !taskFlag">
            <dgiot-icon color="red" icon="file-list-line" />
          </el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-container
      v-loading="loading"
      class="evidence_container"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-spinner="el-icon-loading"
      :element-loading-text="$translateTitle('developer.Waitingtoreturn')"
    >
      <transition name="el-fade-in-linear">
        <el-aside v-show="asideShow" class="evidence_container_aside">
          <div
            v-for="(btn, index) in evidence"
            :key="btn.objectId"
            class="btns"
          >
            <el-button
              circle
              :type="btn.type.length ? btn.type : 'info'"
              @click.native="activeBtn(btn, index)"
            >
              {{ index + 1 }}
            </el-button>
          </div>
        </el-aside>
      </transition>
      <el-main class="evidence_main">
        <div id="konva" class="evidence_main_konva"></div>
      </el-main>
      <transition name="el-fade-in-linear">
        <el-aside
          v-show="taskFlag"
          style="width: 300px !important; background: #fff"
        >
          <div
            v-for="(item, index) in taskList"
            :key="item.objectId"
            :style="{ height: scrollerHeight }"
          >
            <el-card shadow="hover" @click.native="headerTask(item, index)">
              <div slot="header" class="clearfix">
                <span>{{ item.name }}</span>
              </div>
              {{ item.detail.brand }}
              {{ item.profile.testbed }}
            </el-card>
          </div>
          <vab-parser-pagination
            ref="pagination"
            :pagination="paginations"
            :query-payload="queryPayload"
            @pagination="fetchData"
            @paginationQuery="paginationQuery"
          />
        </el-aside>
      </transition>
    </el-container>
    <!--    <el-footer class="evidence_footer">Footer</el-footer>-->
  </el-container>
</template>
<script src="../js/evidence.js"></script>

<style lang="scss" scoped>
  .evidence {
    color: #fff;
    .el-header {
      line-height: 60px;
      text-align: center;
      background-color: #027be3;
    }
    .el-footer {
      line-height: 60px;
      text-align: center;
      background-color: #027be3;
    }

    .el-aside {
      width: 60px !important;
      color: #333;
      text-align: center;
      background-color: #d3dce6;
    }

    .el-main {
      line-height: 160px;
      color: #333;
      text-align: center;
      background-color: #e9eef3;
    }

    body > .el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
  }
  .evidence {
    padding: 0px !important;
    &_header {
      &_row {
        text-align: center;
        i {
          cursor: pointer;
        }
      }
    }
    &_container {
      &_aside {
        .btns {
          display: grid;
          button {
            width: 30px;
            height: 30px;
            margin: 20px auto;
            font-size: 18px;
            line-height: 15px;
            text-align: center;
          }
        }
      }
    }
    &_main {
      &_konva {
        display: inline-block;
        overflow: scroll;
      }
    }
  }
</style>
